<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no ,width=device, initial-scale=1.0 ,maximun.scale=1.0">
    <title>媒体查询体验</title>
    <style>
        p {
            font-size: 38px;
            align-self: center;
        }
        
        body {
            background-image: url(image/王一博.jpg);
        }
        /* 超小屏幕 (小于等于575px)*/
        
        @media screen and (max-width:575px) {
            body {
                background-image: url(image/小王子.jpg);
            }
        }
        /* 小屏幕 (大于等于576px)*/
        
        @media screen and (min-width:576px) {
            body {
                background-image: url(image/肖战.jpg);
            }
        }
        /* 中屏幕 (大于等于768px)*/
        
        @media screen and (min-width:768px) {
            body {
                background-image: url(image/草莓熊.jpg);
            }
        }
        /* 大屏幕 (大于等于992px)*/
        
        @media screen and (min-width:992px) {
            body {
                background-image: url(image/朱一龙2.jpg);
            }
        }
        /* 超大屏幕 (大于等于1200px)*/
        
        @media screen and (min-width:1200px) {
            body {
                background-image: url(image/王一博.jpg);
            }
        }
    </style>
</head>

<body>
    <p>炸蛋12.13</p>
</body>

</html>